<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<title>121dian--客服中心</title>
	<link rel="stylesheet" href="../static/zuanla/lib/bootcss/css/bootstrap.min.css">
	<link rel="stylesheet" href="../static/zuanla/lib/bootcss/css/bootstrap-theme.min.css">
	<script src="../static/zuanla/lib/jquery/1.9.1/jquery.min.js"></script>
	<script src="../static/zuanla/lib/webuploader/webuploader.min.js"></script>
</head>
<body>
 	<div class="container">
 		<form id="j-form">
			<div class="form-group">
				<label>token</label>
				<input type="text" class="form-control" name="token" value="token_597ecd0baf3ed">
			</div>
			<div class="form-group">
				<label>uid</label>
				<input type="text" class="form-control" name="uid" value="16999">
			</div>
			<div class="form-group">
				<label>nickname</label>
				<input type="text" class="form-control" name="nickname" value="美丽">
			</div>
			<div class="form-group">
				<label>site_id</label>
				<input type="text" class="form-control" name="site_id" value="1">
			</div>
			<div class="form-group">
				<label>content</label>
				<input type="text" class="form-control" name="content" value="你好，客服">
			</div>
			<div class="form-group">
				<label>event</label>
				<input type="text" class="form-control" name="event" value="query">
			</div>
			<div class="form-group">
				<label>上传图片</label>
				<div class="input-group">
					<input id="j-image" type="text" class="form-control" name="image">
					<div id="j-picker" class="input-group-addon">上传图片</div>
				</div>
				<div id="j-picker"></div>
			</div>
			<button id="j-sub" type="button" class="btn btn-default">发送</button>
		</form>
		 <div id="show">

  		</div>
 	</div>
</body>
</html>


<script type="text/javascript">
	$(document).ready(function() {
		uploadInit();

		var wsServer = 'ws://120.27.196.220:8686'; //服务器地址
		var websocket = new WebSocket(wsServer); //创建WebSocket对象

		console.log(websocket.readyState);//查看websocket当前状态
		websocket.onopen = function (evt) {
			//已经建立连接
			console.log('与服务端连接建立');
		};
		websocket.onclose = function (evt) {
			//已经关闭连接
			console.log('与服务端连接关闭');
		};
		websocket.onmessage = function (evt) {
			//收到服务器消息，使用evt.data提取
			$("#show").append("<p>"+evt.data+"</p>");
		};
		websocket.onerror = function (evt) {
			//产生异常
			console.log('连接异常');
		};

		$('#j-sub').on('click',function() {
			var d = form2Json('#j-form');
			if (d.image) {
				d.type = 'image';
				d.content = d.image;
			} else {
				d.type = 'text';
			}
			delete d.image;
			console.log(d);
			websocket.send(JSON.stringify(d));
			$("#show").append("<p>"+JSON.stringify(d)+"</p>");
		})
	})

	function form2Json(id) {
        var a = $(id).serializeArray();
        var d = {};
        $.each(a, function() {    
            if (d[this.name]) {    
                if (!d[this.name].push) {    
                    d[this.name] = [d[this.name]];    
                }    
                d[this.name].push(this.value || '');    
            } else {    
                d[this.name] = this.value || '';    
            }    
        });
        return d;
    }
    // 初始化图片上传，自动发送
    function uploadInit() {
        // 上传准备
        var uploader = WebUploader.create({
            auto: true, //开启自动上传
            fileVal: 'image',
            formData: {
                access_token:'',
                app_key: '',
            },
            swf: 'Uploader.swf',
            server: '/upload',
            pick: '#j-picker',
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
            method:'post',
        })
        // 开始上传
        uploader.on('startUpload', function(file) {
            //$.loadShow();
        });
        // 结束上传
        uploader.on('uploadFinished', function(file) {
            //$.loadOver();
        });                
        // 上传成功 
        uploader.on('uploadSuccess', function(file, res) {
            console.log(res);
            $('#j-image').val(res.data.path);
        });          
        // 上传失败 
        uploader.on('uploadError', function(file, res) { 
            console.log(res);
        });    
    }
</script>
